<script lang="ts" setup>
import PageTable from '@/components/q-table/component/page-table.vue';
import { usePageTable, useUpset } from '@/hooks';
import { EditPermissionParams, IPermission, api } from '@/service';
import { NButton, NInput } from 'naive-ui';
import { VxeGridProps } from 'vxe-table';

const tableRow = ref<IPermission>();

const { dialog, message } = useFeedback(['dialog', 'message']);

const { pageTableRef, columns, operations, tableRequest, refreshTable, getTableInstance } = usePageTable<IPermission>({
	api: api.permission.getPaginationPermission,
	columns: [
		{ field: 'permission_name', title: '权限名称', searchFormItem: { type: 'n-input' } },
		{ field: 'permission_id', title: '权限标识', searchFormItem: { type: 'n-input' } },
		{ field: 'comment', title: '备注' },
		{ field: 'create_date', title: '创建时间', cellRender: { name: 'Date' }, searchFormItem: { type: 'n-date-picker' } },
	],
	operations: [
		{
			label: '编辑',
			key: 'edit',
		},

		{
			label: '删除',
			key: 'delete',
			type: 'error',
		},
	],
});

const { formItems, handleAdd, handleEdit, setFormItem } = useUpset<EditPermissionParams, string>({
	formItems: [
		{
			field: 'permission_id',
			title: '权限标识',
			type: 'n-input',
			info: '全局唯一，添加后不可修改，请尽量语义化。如：user-manage、user-add',
			validate: [{ required: true, message: '请输入权限标识' }],
		},
		{ field: 'permission_name', title: '权限名称', type: 'n-input', validate: [{ required: true, message: '请输入权限名称' }] },
		{ field: 'comment', title: '备注', type: 'n-input', props: { type: 'textarea' } },
	],
	api: (data) => (tableRow.value ? api.permission.updatePermission({ ...data, _id: tableRow.value._id }) : api.permission.addPermission(data)),
	success: () => {
		refreshTable();
	},
	beforeOpen: async () => {},
	title: '权限',
	modalOptions: {
		class: 'w-[400px]',
	},
});

const handleAddPermission = () => {
	handleAdd({});
};

const handleEditPermission = (row: IPermission) => {
	tableRow.value = row;
	setFormItem({
		field: 'permission_id',
		value: {
			type: 'n-input',
			props: { disabled: true },
		},
	});

	handleEdit({
		initialData: row,
	});
};

const handleDeletePermission = (row: IPermission) => {
	const deleteDialog = dialog.warning({
		title: '删除权限',
		content: '确定删除该权限吗？',
		positiveText: '确定',
		negativeText: '取消',
		onPositiveClick: async () => {
			try {
				deleteDialog.loading = true;
				const res = await api.permission.deletePermission(row._id);
				message.success('删除成功');
				getTableInstance()?.remove(row);
			} catch (error) {
				message.error('删除失败');
			} finally {
				deleteDialog.loading = false;
			}
		},
	});
};

const handleSelect = (params: { key: string; row: IPermission }) => {
	switch (params.key) {
		case 'add':
			handleAddPermission();
			break;
		case 'edit':
			handleEditPermission(params.row);
			break;
		case 'delete':
			handleDeletePermission(params.row);
			break;
	}
};

const handleRequested = () => {
	pageTableRef.value?.getTableInstance()?.setAllTreeExpand(true);
};
</script>
<template>
	<page-wrap>
		<page-table
			ref="pageTableRef"
			:columns="columns"
			:operations="operations"
			:request="tableRequest"
			@requested="handleRequested"
			@operation-select="handleSelect"
		>
			<template #toolbarButtons>
				<div class="space-x-2">
					<n-button type="primary" @click="() => handleAddPermission()">新增权限</n-button>
				</div>
			</template>
		</page-table>
	</page-wrap>
</template>
